            @charset "utf-8";
            @function r($px) {
                @return ($px/40)*1rem;
            }
             
            @function half($px) {
                @return ($px/2)*1px;
            }
            @keyframes runbg{
                0%{
                    transform: rotateZ(0deg);}
                100%{
                    transform: rotateZ(360deg);
                }
            }
            @keyframes carzhen{
                0%{
                    transform: rotateZ(0deg);
                    
                }
                25%{
                    transform: rotateZ(5deg);
                }
                50%{
                    transform: rotateZ(0deg);
                }
                
                75%{
                    transform: rotateZ(-5deg);
                }
                100%{
                    transform: rotateZ(0deg);
                }
            }
            @keyframes yellowL{
   0%{  opacity: 0;
    -webkit-transform: scale3d(.3,.3,.3);
    transform: scale3d(.3,.3,.3);
}
20% {
    -webkit-transform: scale3d(1.1,1.1,1.1);
    transform: scale3d(1.1,1.1,1.1);
}
40% {
    -webkit-transform: scale3d(.9,.9,.9);
    transform: scale3d(.9,.9,.9);
}

60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03,1.03,1.03);
    transform: scale3d(1.03,1.03,1.03);
}
80% {
    -webkit-transform: scale3d(.97,.97,.97);
    transform: scale3d(.97,.97,.97);
}
100% {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
            }
      }     
      @keyframes start{
    0%, 100% {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

10%, 20% {
    -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
}
30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
}
40%, 60%, 80% {
    -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
      }
   }         
     @keyframes  mouse{
         0%, 100% {
    -webkit-transform: scale(1);
    transform: scale(1);
}
50% {
    -webkit-transform: scale(.96);
    transform: scale(.96);
}
     }
       @keyframes smallmouse{
           0%,100%{
               transform: scale(1);
           }
           50%{
               transform: scale(1.1);
           }
       }
            html{
                width: 100%;
                height: 100%;
                position: fixed;
            }
            
            body{
                   overflow: hidden;
               }
            .loadingBar {
                background-color: dimgray;
                width: r(750);
              height:100%;
            
            }
            .star{
                width: r(750);
              height: 100%;
            }
            .protagonist {
                width: r(680);
                position: absolute;
                left:r(40);
                bottom: r(150);
                z-index: 1;
            }
            .loading{
                letter-spacing: r(4);
                font-size: r(36);
                position: absolute;
                left: 3%;
                bottom: 8%;
                color: white;
            }
            .earch{
                width: r(450);
                position: absolute;
                right: 0;
                bottom: 0;
            }
            .pleaseWearEar{
                width: r(200);
                position: absolute;
                bottom: r(20);
                left: r(280);
            }
            .arrow{
                width: r(120);
                position: absolute;
                bottom: r(180);
                left: r(300);
            }
            .user_bg{
                position: absolute;
                left: -100%;
                top: -80%;
                width: r(2250);
                height:r(3618);
                animation: runbg 3s linear infinite;
                transform-origin: center;
            }
            .user_bg1{
                width: r(750);
                height: 100%;
            }
            .index_520{
                width: r(650);
                position: absolute;
                left: r(40);
                top: r(150);
                z-index: 1;
            }
            .mouth{
                width: r(650);
                position: absolute;
                left: r(40);
                top: 35%;
                 animation: mouse 1s ease infinite;
            }
            .whatSong{
                width: r(250);
                position: absolute;
                top: 45%;
                left:r(280);
                z-index: 1;
            }
            .man_left{
                width: r(370);
                position: absolute;
                left: 2%;
                bottom: r(130);
                z-index: 1;
            }
            .man_right{
                width: r(370);
                position: absolute;
                right: 2%;
                bottom: r(80);
                z-index: 1;
            }
            .index_start{
                width: r(300);
                position: absolute;
                bottom: 3%;
                left: 30%;
                z-index: 1;
                animation:start 1s ease infinite;
            }
            .sixQuery{
                width: r(220);
                position: absolute;
                left: 2%;
                bottom:r(300) ;
                z-index: 2;
            }
            .what_1{
                width: r(60);
                position: absolute;
                left: 50%;
                bottom:r(430) ;
                z-index: 2;
            }
            .what_2{
                 width: r(60);
                position: absolute;
                left: 50%;
                bottom:r(280) ;
                z-index: 2;
            }
            .what_3{
                width: r(60);
                position: absolute;
                right: 2%;
                bottom:r(430) ;
                z-index: 2;
            }
            .what_4{
                 width: r(60);
                position: absolute;
                right: 2%;
                bottom:r(280) ;
                z-index: 2;
            }
            .kugou{
                width: r(300);
                position: absolute;
                right: 3%;
                top: 2%;
            }
            .movieHitSongpeople{
                width: r(680);
                position: absolute;
                top: 22%;
                left: 5%;
            }
            .movieHitSong{
                width: r(630);
                position: absolute;
                left: 3%;
                top: r(80);
                z-index: 1;
            }
            .movieHitSongCityWall{
                width: r(750);
                position: absolute;
                top: 50%;
                left: 0%;
                          
            }
            .selectA{
                width:r(530) ;
                position: absolute;
                left: 5%;
                bottom: 25%;
            }
            .selectB{
                width: r(530);
                position: absolute;
                left: 5%;
                bottom: 14%;
            }
            .selectC{
                width: r(530);
                position: absolute;
                left: 5%;
                bottom: 3%;
            }
            .smallMouth{
                width: r(140);
                position: absolute;
                right: 3%;
                bottom: 25%;
                animation: smallmouse 1s linear infinite;
            }
            .song1{
                position: absolute;
                left: 22%;
                bottom: 28%;
             
            }
            .song2{
                position: absolute;
                left: 22%;
                bottom: 17%;
               
            }
            .song3{
                position: absolute;
                left: 22%;
                bottom: 6%;
           
            }
            .times{
                position: absolute;
                right: 8%;
                bottom: 28.6%;
                display:  none;
                animation: smallmouse 1s linear infinite;
            }
            .lightearth{
                position: absolute;
                width: r(652);
                left: 4%;
                top: 0%;
            }
            .threeYao{
                width: r(486);
                position: absolute;
                left: 5%;
                top: 6%;
                z-index: 1;
                animation: smallmouse 1s linear infinite;
            }
            .car{
                width: r(750);
                position: absolute;
                left: 0%;
                top: 28%;
               animation: carzhen 1s linear infinite; 
            }
            .flower{
                width: r(140);
                position: absolute;
                right: 6%;
                top: 30%;
            }
            .lightearth_2{
                 position: absolute;
                width: r(652);
                 right: -26%;
                top: 2%;
            }
            .oldman{
                position: absolute;
                width: r(460);
                top: 11%;
                left: 20%;
                z-index: 1;
            }
            .yellowFlower_left{
                position: absolute;
                width: r(180);
                top: 40%;
                left: 2%;
                animation: yellowL 1s ease infinite;
            }
             .yellowFlower_right{
                position: absolute;
                width: r(150);
                top: 40%;
                right: 2%;
                animation: yellowL 1s ease infinite;
            }
            .wogeini{
                position: absolute;
                width: r(550);
                top: 2%;
                left: 0%;
            }
            .man{
                position: absolute;
                width: r(640);
                left: 3%;
                top: 28%;
            }
            .wuman{
                position: absolute;
                width: r(320);
                right: 3%;
                top: 12%;
                z-index: 1;
            }
            .lightearth_3{
                position: absolute;
                top:0% ;
                left: 2%;
                width: r(700);
            }
            .audienceLeft{
                width: r(300);
                position: absolute;
                top: 37%;
                left: 2%;
            }
            .audienceRight{
                width: r(300);
                position: absolute;
                right:0%;
                top: 37%;
                
            }
            .stage{
                position: absolute;
                width: r(750);
                top: 47%;
                left: 0%;
            }
            .songer{
                position: absolute;
                top: 12%;
                width: r(450);
                left: 20%;
                z-index: 1;
            }
            .wow_1{
                position: absolute;
                top: 22%;
                left: 0%;
                width: r(230);
            }
           .wow_2{
                position: absolute;
                top: 20%;
               right: 0%;
                width: r(280);
            }
            .watchpeos{
                position: absolute;
                width: r(750);
                top: 12%;
                left: 0%;
                z-index: 1;
            }
            .WCwalls{
                position: absolute;
                width: r(750);
                left: 0%; 
                top: 48%;
            }
            .jianfeizaode{
                position: absolute;
                width: r(360);
                right: 0%;
                top: 6%;
                z-index: 1;
            }
            .feiZhao{
                position: absolute;
                width: r(180);
                top: 60%;
                left: 5%;
            }
            .userint{
                position: absolute;
                width: r(250);
                left: 2%;
                top: 2%;
            }
            .touxiang{
                position: absolute;
                width: r(60);
                left: 4%;
                top: 3%;
            }
            // .username{
            //     position: absolute;
            //     left: 17%;
            //     top: 4%;
            //   font-size: r(30);
            //   line-height: r(30);
            // }
            .huangjing{
                position: absolute;
                width: r(200);
                top: 10%;
                left: 40%;
            }
            .info{
                position: absolute;
                width: r(250);
                left: 40%;
                top: 30%;
            }
            .guess_count{
                position: absolute;
                left: 43%;
                top: 31%;
            }
            .text{
                position: absolute;
                width: r(730);
                left: 2%;
                top: 40%;
            }
            .text_title{
                position: absolute;
                left: 34%;
                top: 42%;
                font-size: r(100);
                letter-spacing: r(60);
            }
            .buttonLeft{
                position: absolute;
                width: r(300);
                left: 10%;
                top: 60%;
            }
            .buttonRight{
                position: absolute;
                width: r(300);
                left: 52%;
                top: 60%;
            }
            .buttonleft_titile{
                position: absolute;
                left: 22%;
                top: 61%;
            }
            .buttonright_title{
                position: absolute;
                left: 54%;
                top: 61%;
            }
            .paiming_title{
                position: absolute;
                width: r(350);
                left: 25%;
                bottom: 21%;
                z-index: 1;
            }
            .paiming{
                position: absolute;
                width: r(700);
                left: 2%;
                bottom: 1%;
            }
            .huangjing_2{
                position: absolute;
                width: r(100);
                left: 8%;
                bottom: 10%;
            }
            .kugou_2{
               width: r(230);
                position: absolute;
                right: 3%;
                top: 2%;              
            }
            .share{
                position: absolute;
                left: 5%;
                top: 5%;
                width: r(540);
                z-index: 3;
            }
            .bg{
                position: absolute;
               width: r(750);
               height: 100%;
               left: 0%;
               top: 0%;
               background:  rgba(0,0,0,0.7);
               z-index: 2;
               }
            #tip{
            display: none;
            position: absolute;
            top: 50%;
            left: 6%;
            width:r(450) ;
            padding-left: r(220);
            height: r(100);
            line-height: r(100);
            color: #FFF;        
            background: rgba(0,0,0,.4);
            border-radius: r(10);
            z-index: 3;
            }
        
